<!--loadmore 组件 ，仿照mint-ui中的loadmore-->
<template>
  <div class="loadmore-container">
    <div class="loadmore-content">
        <slot name="bottom">

        </slot>
    </div>
  </div>
</template>
<script>
  export default {
    name: 'loadmore',
    data () {
      return {
        msg: '加载更多',
        scrollEventTarget:null,
        topText:'',
        topStatus:'',
        bottomStatus:''
      }
    },
    created () {
      
    },
    methods: {
        init () {
            this.topStatus = 'pull' ;
            this.bottomStatus = 'pull' ;
            this.scrollEventTarget = this.getScrollEventTarget(this.$el);

            console.log("scrollEventTarget is :" , this.scrollEventTarget) ;
            console.log("loadmore is init ..." , this.$el) ;
        },
        //获取滚动的目标对象
        getScrollEventTarget (element) {
            let currentNode = element;
            while (currentNode && currentNode.tagName !== 'HTML' &&
              currentNode.tagName !== 'BODY' && currentNode.nodeType === 1) {
              let overflowY = document.defaultView.getComputedStyle(currentNode).overflowY;
              if (overflowY === 'scroll' || overflowY === 'auto') {
                return currentNode;
              }
              currentNode = currentNode.parentNode;
            }
            return window;
        },
        //填充容器
        fillContainer () {

        }
    },
    components: {
      
    },
    mounted () {
        console.log("this is loadmore ...") ;
        this.init() ;   
    }
  }
</script>
<style lang="less" scoped>
    .loadmore-container{
        overflow:hidden;
    }
    .loadmore-content{
        transition:.2s;
    }
</style>